<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--[if lte IE 9 ]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>网络设置</title>
<link rel="stylesheet" href="../../css/bootstrap.min.css" />
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/manage.css" />
<style>
.container-fluid {
	padding-left: 30px;
	padding-right: 30px;
}
.main-wrapper {
	min-width: 270px;
	margin: 30px 0 0 0;
}
.main-wrapper.main-w-opt {
	min-width: 540px;
}
.col-md-6 .main-wrapper {
	min-height: 680px;
}
@media (max-width:991px) {
	.col-md-6 .main-wrapper {
		min-width:540px
	}
}
.options-radio {
	padding: 5px 0;
}
.options {
	width: 100px;
	height: 100px;
	background: #fff;
	padding: 3px;
	border: 1px solid #edf0f5;
	margin-left: -1px;
	float: left;
}
.options select {
	height: 24px;
	position: relative;
	top: 3px;
}
.opt-icon {
	width: 100%;
	height: 64px;
	
}
.opt-icon.lan,
.opt-icon.lan0,
.opt-icon.lan1,
.opt-icon.lan2,
.opt-icon.lan3,
.opt-icon.lan4,
.opt-icon.lan5,
.opt-icon.lan6 {
	background: url('../../images/ethernet.png') #f4f7fd no-repeat 30px -105px;
}
.opt-icon.wan,
.opt-icon.wan0,
.opt-icon.wan1,
.opt-icon.wan2,
.opt-icon.wan3,
.opt-icon.wan4,
.opt-icon.wan5,
.opt-icon.wan6 {
	background: url('../../images/ethernet.png') #f4f7fd no-repeat 30px 15px;
}
.opt-icon.none {
	background: url('../../images/ethernet.png') #f4f7fd no-repeat 30px -225px;
}
.opt-select {
	background: #fff;
	height: 30px;
	width: 100%;
	line-height: 30px;
	text-align: center;
}
.form-horizontal .control-label.only {
	text-align: left;
	font-size: 20px;
}
.nav.nav-tabs {
	margin-bottom: 20px;
}
.ischeck {
	display: none;
}
</style>
<script src="../../js/lib/jquery-1.11.3.min.js"></script>
<script src="../../js/lib/jquery.cookie.js"></script>
<script src="../../js/lib/json2.js"></script>
<script src="../../js/lib/bootstrap.min.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/common/jquery.ext.verify.js"></script>
<script src="../../js/admin_network/network.js"></script>
</head>
<body>
<!-- header -->
<div id="header_ajax"></div>
<script src="../../js/common/header.ajax.js"></script>

<!-- main Start -->
<div id="main" class="main">
	<div class="container-fluid">
		<div class="main-wrapper clearfix main-w-opt">
			<div class="main-top">
				<span class="title"><i class="icon-align-justify"></i> 接口模式</span>
			</div>
			<form class="form-horizontal">
				<div class="form-group clearfix">
					<div class="col-md-4 clearfix" style="margin:30px 0">
						<label class="col-md-4 col-sm-3 col-xs-4 control-label">接口模式</label>
						<div id="select_opts" class="col-md-7 col-sm-6 col-xs-6">
							<select class="form-control">
								<option value="1lan1wan">单LAN 单WAN模式</option>
								<option value="1lan2wan">单LAN 双WAN模式</option>
								<option value="2lan1wan">双LAN 单WAN模式</option>
								<option value="2lan2wan">双LAN 双WAN模式</option>
								<option value="custom">自定义模式</option>
							</select>
						</div>
					</div>
					<div id="eth_ops" class="col-md-8 clearfix">
						<div class="options">
							<div class="opt-icon wan"></div>
							<div class="opt-select">wan</div>
						</div>
						<div class="options">
							<div class="opt-icon lan1"></div>
							<div class="opt-select">lan1</div>
						</div>
						<div class="options">
							<div class="opt-icon lan1"></div>
							<div class="opt-select">lan1</div>
						</div>
						<div class="options">
							<div class="opt-icon lan1"></div>
							<div class="opt-select">lan1</div>
						</div>
						<div class="options">
							<div class="opt-icon lan1"></div>
							<div class="opt-select">lan1</div>
						</div>
					</div>
				</div>
			</form>
		</div>

		<div class="row">
			<div class="col-md-6">
				<div class="main-wrapper clearfix">
					<div class="main-top">
						<span class="title"><i class="icon-align-justify"></i> LAN</span>
					</div>
					<form class="form-horizontal" id="form_lan">
						<ul class="nav nav-tabs">
							<li class="active">
								<a href="#tabs_lan1" data-toggle="tab">lan1</a>
							</li>
						</ul>

						<div class="tab-content">
							<div class="tab-pane active" id="tabs_lan1" data-mtip="lan1">
								<div class="form-group clearfix">
									<label class="col-xs-3 control-label only">基本配置</label>
								</div>
								<div class="form-group clearfix">
									<label class="col-xs-3 control-label" for="lan1__ipaddr">IP地址</label>
									<div class="col-xs-6">
										<input type="text" id="lan1__ipaddr" class="form-control" verify="lan_ip lan1__netmask" />
									</div>
								</div>
								<div class="form-group clearfix">
									<label class="col-xs-3 control-label" for="lan1__netmask">子网掩码</label>
									<div class="col-xs-6">
										<input type="text" id="lan1__netmask" class="form-control" verify="lan_mask" />
									</div>
									<div class="col-xs-3 tip-icons">
										<span class="icon-tip" data-toggle="tooltip" data-placement="bottom" title="请输入大于255.0.0.0的子网掩码。"><i class="icon-question-sign"></i></span>
									</div>
								</div>

								<div class="form-group clearfix">
									<label class="col-xs-3 control-label only">DHCP配置</label>
								</div>
								<div class="form-group clearfix check-dhcp">
									<label class="col-xs-3 control-label" for="lan1__dhcpd__enabled">启用DHCP</label>
									<div class="col-xs-6">
										<div class="checkbox">
											<label><input type="checkbox" id="lan1__dhcpd__enabled" class="denable" value="1 0" checked /></label>
										</div>
									</div>
								</div>
								<div class="form-group clearfix">
									<label class="col-xs-3 control-label" for="lan1__dhcpd__start">起始IP地址</label>
									<div class="col-xs-6">
										<input type="text" id="lan1__dhcpd__start" class="form-control verifymask" verify="ipmask lan1__ipaddr lan1__netmask none" />
									</div>
									<div class="col-xs-3 tip-icons">
										<span class="icon-tip" data-toggle="tooltip" data-placement="bottom" title="输入DHCP分配的起始IP地址。"><i class="icon-question-sign"></i></span>
									</div>
								</div>
								<div class="form-group clearfix">
									<label class="col-xs-3 control-label" for="lan1__dhcpd__end">结束IP地址</label>
									<div class="col-xs-6">
										<input type="text" id="lan1__dhcpd__end" class="form-control verifymask" verify="ipmask lan1__ipaddr lan1__netmask lan1__dhcpd__start" />
									</div>
									<div class="col-xs-3 tip-icons">
										<span class="icon-tip" data-toggle="tooltip" data-placement="bottom" title="输入DHCP分配的结束IP地址。"><i class="icon-question-sign"></i></span>
									</div>
								</div>
								<div class="form-group clearfix">
									<label class="col-xs-3 control-label" for="lan1__dhcpd__leasetime">租用时间</label>
									<div class="col-xs-6">
										<input type="text" id="lan1__dhcpd__leasetime" class="form-control" verify="num 1 65535" />
									</div>
									<div class="col-xs-3 tip-icons">
										<span class="units">小时</span>
										<span class="icon-tip" data-toggle="tooltip" data-placement="bottom" title="输入数字1~65535。"><i class="icon-question-sign"></i></span>
									</div>
								</div>
								<div class="form-group clearfix">
									<label class="col-xs-3 control-label" for="lan1__dhcpd__dns1">DNS1</label>
									<div class="col-xs-6">
										<input type="text" id="lan1__dhcpd__dns1" class="form-control" placeholder="自动" verify="ipsp" />
									</div>
								</div>
								<div class="form-group clearfix">
									<label class="col-xs-3 control-label" for="lan1__dhcpd__dns2">DNS2</label>
									<div class="col-xs-6">
										<input type="text" id="lan1__dhcpd__dns2" class="form-control" verify="ipsp" />
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
			
			<div class="col-md-6">
				<div class="main-wrapper clearfix">
					<div class="main-top">
						<span class="title"><i class="icon-align-justify"></i> WAN</span>
					</div>
					<form class="form-horizontal" id="form_wan">
						<ul class="nav nav-tabs">
							<li class="active">
								<a href="#tabs_wan" data-toggle="tab">wan</a>
							</li>
						</ul>
						
						<div class="tab-content">
							<div class="tab-pane active" id="tabs_wan" data-mtip="wan">
								<fieldset>
									<div class="form-group clearfix check-connect">
										<label class="col-xs-3 control-label">接入方式</label>
										<div class="col-xs-6">
											<div class="radio">
												<span class="padr">
													<label><input type="radio" id="wan__proto" name="wan__proto" value="dhcp" checked />自动获取</label>
												</span>
												<span class="padr">
													<label><input type="radio" id="" name="wan__proto" value="pppoe" />PPPoE</label>
												</span>
												<span class="padr">
													<label><input type="radio" id="" name="wan__proto" value="static" />静态IP</label>
												</span>
											</div>
										</div>
									</div>
									<div class="form-group pppoe ischeck clearfix">
										<label class="col-xs-3 control-label" for="wan__pppoe_account">用户名</label>
										<div class="col-xs-6">
											<input type="text" id="wan__pppoe_account" class="form-control" disabled="disabled" verify="notspace" />
										</div>
									</div>
									<div class="form-group pppoe ischeck clearfix">
										<label class="col-xs-3 control-label" for="wan__pppoe_password">密码</label>
										<div class="col-xs-6">
											<input type="password" id="wan__pppoe_password" class="form-control" disabled="disabled" verify="notspace" />
										</div>
										<div class="col-xs-3 tip-icons">
											<span class="icon-tip showlock" data-toggle="tooltip" data-placement="bottom" title="显示/隐藏密码"><i class="icon-lock icon-large"></i></span>
										</div>
									</div>
									<div class="form-group static ischeck clearfix">
										<label class="col-xs-3 control-label" for="wan__ipaddr">IP地址</label>
										<div class="col-xs-6">
											<input type="text" id="wan__ipaddr" class="form-control" disabled="disabled" verify="ip" />
										</div>
									</div>
									<div class="form-group static ischeck clearfix">
										<label class="col-xs-3 control-label" for="wan__netmask">子网掩码</label>
										<div class="col-xs-6">
											<input type="text" id="wan__netmask" class="form-control" disabled="disabled" verify="mask" />
										</div>
									</div>
									<div class="form-group static ischeck clearfix">
										<label class="col-xs-3 control-label" for="wan__gateway">网关</label>
										<div class="col-xs-6">
											<input type="text" id="wan__gateway" class="form-control" disabled="disabled" verify="ip" />
										</div>
									</div>
									<div class="form-group static ischeck clearfix">
										<label class="col-xs-3 control-label" for="wan__dns1">DNS1</label>
										<div class="col-xs-6">
											<input type="text" id="wan__dns1" class="form-control" disabled="disabled" verify="ip" />
										</div>
									</div>
									<div class="form-group static ischeck clearfix">
										<label class="col-xs-3 control-label" for="wan__dns2">DNS2</label>
										<div class="col-xs-6">
											<input type="text" id="wan__dns2" class="form-control" disabled="disabled" verify="ipsp" />
										</div>
									</div>
									<div class="form-group clearfix">
										<label class="col-xs-3 control-label" for="wan__metric">使用网关跃点</label>
										<div class="col-xs-6">
											<input type="text" id="wan__metric" class="form-control empty" maxlength="5" verify="numsp 1 255" />
										</div>
										<div class="col-xs-3 tip-icons">
											<span class="icon-tip" data-toggle="tooltip" data-placement="bottom" title="输入数字1~255。用于决定主次网关，跃点数越小优先级越高，不同WAN口须配置不同的跃点数。"><i class="icon-question-sign"></i></span>
										</div>
									</div>
									<div class="form-group clearfix">
										<label class="col-xs-3 control-label" for="wan__mac">MAC地址</label>
										<div class="col-xs-6">
											<input type="text" id="wan__mac" class="form-control empty" verify="macsp" />
										</div>
									</div>
									<div class="form-group clearfix">
										<label class="col-xs-3 control-label" for="wan__mtu">设置MTU</label>
										<div class="col-xs-6">
											<input type="text" id="wan__mtu" class="form-control empty" placeholder="1500" maxlength="9" verify="numsp 1 1500" />
										</div>
										<div class="col-xs-3 tip-icons">
											<span class="icon-tip" data-toggle="tooltip" data-placement="bottom" title="输入数字1~1500。若无特殊需求，请勿修改。"><i class="icon-question-sign"></i></span>
										</div>
									</div>
								</fieldset>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div class="main-wrapper clearfix" style="padding:10px 20px;margin-bottom:30px;">
			<div class="btn-group">
				<a class="btn btn-zx submit"><i class="icon-save"></i>保存</a>
			</div>
		</div>
	</div>
</div>
<!-- main End -->

<!-- 提示 -->
<div id="modal_tips" class="modal fade" tabindex=-1>
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">提示</h4>
			</div>
			<div class="modal-body">
				<div class="modal-p">
					<span></span>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-zx btn-modal">确定</button>
			</div>
		</div>
	</div>
</div>

<!-- spin -->
<div id="modal_spin" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<i class="icon-spin icon-spinner icon-4x"></i>
				<p>Loading...</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>